<template>
	<div class="order-history">
    <scroll-view class="scroll-view" scroll-x="true" :scroll-left="scrollLeft">
      <ul class="list-rec">
        <li v-for="(item, index) in orderStatusArr" :key="index" @click="changeIndex(index)" :class="{'active': index == recIndex}">
          <p>{{item}}</p>
        </li>
      </ul>
    </scroll-view>
   
   <div class="scroll-order" :style="{'height':scrollHeight+'px'}">
     
        <div class="order-wrap" id="oWrap"  v-if="orderHistoryArr.length > 0">
          <div class='order-item' v-for="(item, index) in orderHistoryArr" :key="index" @click="getPreOrderDetail(item)">
            <h2><span class="fr">{{ item.createTime }}</span>{{ item.courseSnapshotName }}</h2>
            <p>合约编号：{{ item.signCourseId }}</p>
            <!-- <p>店铺名称：{{ item.storeName ? item.storeName : '' }}</p> -->
            <p v-if="userInfo.roleCode">上课会员：{{ item.memberUserName }}</p>
            <p v-else>授课教练：{{ item.coachUserName }}</p>
            <p>课程模式：{{ item.courseMode === 2 ? '1对2' : '1对1' }}</p>
            <p>预约方式：{{ item.appointmentWay === 0 ? '教练代约' : '会员预约' }}</p>
            <p>上课时间：{{ item.classStartTime }} - {{ item.classEndTime.split(' ')[1] }}</p>
            <i class="oicon oicon-1" :class="[getClass(item.appointmentStatus)]"></i>
          </div>
        </div>
        <div class="no-data" v-if="orderHistoryArr.length === 0">
          <img src="https://newmefit.cn/resource/gym/base/base6.png">
        </div>
   
      </div>
    <!-- <uni-load-more :status="more"></uni-load-more> -->
	</div>
</template>

<script>
  import { appointmentPage } from '@/api/manageApi'
  import {getStore, setStore} from '@/util/service'
  import {mapGetters} from 'vuex'
	export default {
		data() {
			return {
        page: 1,
        limit: 10,
        appointmentStatusList: [],
        isMore: true,
        orderStatusArr: [
          '全部',
          '已预约',
          '已取消',
          '已完成',
          '已作废',
        ],
        recIndex: 0,
        interval: 2000,
        duration: 500,
				scrollHeight: 200,
        scrollLeft: 0,
        orderHistoryArr: []
			}
    },
    computed:{
			...mapGetters(['uniToken', 'userInfo']),
      getClass () {
        return (val) =>{
          if (val === -1) {
            return 'oicon-3'
          } else if (val === 0) {
            return 'oicon-1'
          } else if (val === 1) {
            return 'oicon-4'
          } else if (val === 2) {
            return 'oicon-2'
          } else if (val === 3) {
            return 'oicon-2'
          }
        }
      }
		},
		onLoad (option) {
      this.getAppointmentPage(1)
    },
    onShow (option) {
      // this.getAppointmentPage(this.userInfo.phone, [])
    },
		methods: {
      fixHeight () {
				this.$nextTick(() => {
					// #ifdef MP-WEIXIN
					var self = this
					var query = wx.createSelectorQuery();
					query.select('.order-wrap').boundingClientRect(function (res) { 
            if (res) {
						  self.scrollHeight = res.height
            }
					}).exec();
					// #endif
					// #ifdef H5
					this.scrollHeight = document.getElementById("oWrap").offsetHeight
					// #endif
				})
			},
			getAppointmentPage (pageNum) {
        if(!this.isMore){
          return
        }
        this.page = pageNum
				var params = {
          current:  this.page,
          end: '',
          ext: {},
          key: this.userInfo.phone,
          orders: [
            {
              order: 'desc',
              sort: 'createTime'
            }
          ],
          // signCourseId: 0,
          size: this.limit,
          start: '',
          storeId: '',
          appointmentStatusList: this.appointmentStatusList
        }
				appointmentPage(params).then(res => {
					// console.log(res)
					if (res.code == 200){
            var data = res.data.records

          
            this.orderHistoryArr = this.orderHistoryArr.concat(data) 

            if(data.length < this.limit){
              this.isMore = false
            }
           
					}
          this.fixHeight()
				})
			},
      changeIndex (index) {
				this.recIndex = index
        if(index > 2){
					this.scrollLeft = 100
        }
        if(index < 3){
					this.scrollLeft = 0
        }

        var al = []
        if (index === 0) {
          al = []
        } else if (index === 1) {
          al = [0]
        } else if (index === 2) {
          al = [2, 3]
        } else if (index === 3) {
          al = [1]
        } else if (index === 4) {
          al = [-1]
        }
        this.appointmentStatusList = al
        this.orderHistoryArr = []
        this.isMore = true
        this.getAppointmentPage(1)
      },
			// changeSwiper (e) {
			// 	this.changeIndex(e.detail.current)
			// },
      getPreOrderDetail (item) {
        // console.log(item)
        var url = '/pagesA/preOrder/preOrderDetail?id='+item.id
        setStore('preOrderDetail', JSON.stringify(item))
			  this.goUrl(url)
      },
      onReachBottom(){
        this.page ++
        this.getAppointmentPage(this.page)
      }
		}
	}
</script>

<style lang="scss">
.order-history{
  padding-top: 96rpx;
  padding-bottom: 96rpx;
  .fr{
    float: right;
  }
  .scroll-view{
    width: 100%;
    height: 96rpx;
    overflow-y:hidden;
    overflow-x: auto;
    white-space: nowrap;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0rpx;
    z-index: 999;
    border-bottom: 1px solid #f5f5f5;
    .list-rec{
      width: auto;
      height: 100%;
      li{
        display: inline-block;
        width: 20%;
        text-align: center;
        line-height: 96rpx;
        position: relative;
      }
      .active{
        font-weight: bold;
        color: #FF5A20;
      }
      .active::after{
        content: '';
        width: 38rpx;
        height: 8rpx;
        background: #FF5A20;
        border-radius: 4rpx;
        position: absolute;
        left: 50%;
        margin-left: -19rpx;
        bottom: 0;
      }
    }
  }
  .scroll-order{
    margin-top: 24rpx;
    .order-wrap{
      .order-item{
        width: 702rpx;
        // height: 338rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        padding: 35rpx 28rpx;
        box-sizing: border-box;
        margin: 0 auto 24rpx;
        position: relative;
        h2{
          overflow: hidden;
          font-weight: 400;
          font-size: 30rpx;
          color: #1E1E1E;
          margin-bottom: 20rpx;
          line-height: 30rpx;
          span{
            font-size: 24rpx;
            color: #838383;
          }
        }
        p{
          font-size: 24rpx;
          color: #838383;
          line-height: 40rpx;
        }
      }
    }
  }
  .oicon{
    width: 120rpx;
    height: 120rpx;
    display: inline-block;
    position: absolute;
    right: 29rpx;
    bottom: 79rpx;
  }
  .oicon-1{
    background: url('../static/order1.png') no-repeat 0 0;
    background-size: contain;
  }
  .oicon-2{
    background: url('../static/order2.png') no-repeat 0 0;
    background-size: contain;
  }
  .oicon-3{
    background: url('../static/order3.png') no-repeat 0 0;
    background-size: contain;
  }
  .oicon-4{
    background: url('../static/order4.png') no-repeat 0 0;
    background-size: contain;
  }
}
</style>
